<html>
<head>
<title>Urlzen dashboard</title>
<style type="text/css">
{
margin: 0;
padding: 0;
}
body {text-align: center;background-color: #d6d6d6; margin: 0; padding:0;color:#666;font-size:12px;}
#top {width:100%;text-align:right;padding-top:5px;background-color:#f0f0f0;}
#top #greeting {width:960px;margin-left:auto;margin-right:auto;}
#page {width:960px;margin-left:auto;margin-right:auto;background-color:#d6d6d6;}
#head {width:960px;height:60px;text-align:left;margin-top:10px;}
#head .left {width:320px;height:60px;float:left;}
#head .center {width:320px;height:60px;float:left;}
#head .right {width:320px;height:55px;float:left;text-align:right;margin-top:5px;}
#content .left {width:740px;float:left;text-align:left;overflow:auto;}
#content .right {width:220px;float:left;}
#content .left table {width:640px;background-color:#f0f0f0;border:solid 1px #666;margin-left:20px;margin-top:20px;text-align:left;}
#content .left table th.link {width:440px;}
#content .left table th.domains {width:100px;}
#content .left table th.clicks {width:100px;}
#content .left table td.link {width:440px;max-width:440px;overflow:none;}
#content .left table td.domains {width:100px;text-align:center;}
#content .left table td.clicks {width:100px;text-align:center;}
#content .left table tr.odd {background-color:#f0f0ff;}
#content .left table tr.even {background-color:#f0f0f0;}
#content .left table tr:hover {background-color:#fff;cursor:pointer;}
#content .left table tr.details {background-color:#fff;}

#content .details {}
#content .left #pager {width:640px;text-align:center;}
#footer {width:960px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  //hide the all of the element with class msg_body
  $("tr.details").hide();
  $("tr.overview").click( function()
	        {
	                var ids = $(this).attr('id').split('_');
	                var id = (ids[(ids.length-1)]);
	                $("#details_"+id).toggle();
	                $("#details_"+id).load('/dashboard/details?slug='+id);
	        } );
	// facebox
	$('a[rel*=facebox]').facebox(); 
});
</script>
</head>
<body>
<div id="top"><div id="greeting">{{greeting}}</div></div>
<div id="page">
 <div id="head"><div class="left"><img src="/images/urlzen_logo_small.png" /></div><div class="center"><form><input type="text" name="longurl" /><input type="submit" name="submit" value="Shorten" /><a href="/bookmarklet" rel="facebox">Advanced</a></form></div><div class="right">&nbsp;</div></div>
 <div id="content">
	 <div class="left">
		<table cellspacing="0">
			<tr><th class="link">Link</th><th class="domains">Domains</th><th class="clicks">Clicks</th><th></th></tr>
			{% for url in urls %}
			  <tr class="{% cycle odd,even %} overview" id="overview_{{url.slug}}">

				<td class="link">{{url.page_title}}</td><td class="domains">{{url.domain_counter}}</td><td class="clicks">{{url.counter}}</td></tr>
				<tr class="details" id="details_{{url.slug}}"><td colspan=3>&nbsp;</td></tr>
			{% endfor %}
		</table><div id="pager">Next</div></div>
	 <div class="right">
		<h2>Top links:</h2>
		<table>
		{% for link in top_links %}
		  <tr><td>{{link.page_title}}</td><td>{{link.counter}}</td></tr>
		{% endfor %}
		</table>
		<h2>Top domains:</h2><br />[pie chart]<br /><h2>Clicks this week:</h2><br />[bar chart]<br /><p>D you like urlzen?<br />Do you have a blog?<br />Check out our content focused analytics tool for bloggers: [statzen logo]</p></div>

 <div id="footer">developed by <a href="http://jaxn.org">Jackson Miller</a></div>
</div>
</html>